<template>
  <div class="mycard-container col-xs-12 col-sm-12 col-lg-4">
    <div class="w-full h-full con">
      <div class="header" v-if="$slots.header">
        <slot name="header"></slot>
      </div>

      <div class="content" v-if="$slots.content">
        <slot name="content"></slot>
      </div>

      <div class="footer flex items-center" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.mycard-container {
  background-color: transparent;
  padding-left: 0 !important;
  padding-bottom: 12px;

  .con {
    transition: all 0.3s;
    &:hover {
      border: 1px solid transparent;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    }
    border-radius: 4px;
    padding: 15px 15px 10px 15px;
    background-color: $bg-light-1;
    .header {
      display: flex;
      align-items: center;
      height: 30px;
    }

    .content {
      height: 100px;
    }

    .footer {
      border-top: 1px solid #eee;
      height: 30px;
    }
  }
}
</style>
